<!DOCTYPE html><html>
<head>
<title>Test scrolling surface sprite.js</title>
<style>
html, body{margin:0;padding:0}
<meta name = "viewport" content = "user-scalable=no, width=device-width">
</style>
</head>
<body>
<p>Sprite.js, scrolling surface test. <a href="https://github.com/batiste/sprite.js">Github project page</a>
(<span id="fps"></span>FPS, load <span id="load"></span>%)</p>

<script src="../sprite.js"></script>
<script src="../lib/scrolling.js"></script>
<script>

var scene = sjs.Scene({w:672, h:480, autoPause:false});

scene.loadImages(['img/tiles.png'], function() {

    var offsetx = 0;
    var offsety = 0;
    var fps = document.getElementById('fps');
    var load = document.getElementById('load');

    function random_from_list(list) {
        var index=Math.floor(Math.random() * list.length);
        return list[index];
    }

    var possible_tiles = [[0, 0], [0, 1], [1, 0], [1, 1], [2, 0], [2, 1], [3, 0], [3, 1]];

    var tile_list = [];
    for(var i = 0; i<possible_tiles.length; i++) {
        var tile = scene.Sprite('img/tiles.png', {w:48, h:48, x:0, y:0});
        tile.offset(48 * possible_tiles[i][0], 48 * possible_tiles[i][1]);
        tile_list.push(tile);
    }

    var surface = sjs.ScrollingSurface(scene, scene.w, scene.h, function(layer, x, y) {
        for(var x = 0; x < (layer.w / 48); x++) {
            for(var y = 0; y < (layer.h / 48); y++) {
                var tile = random_from_list(tile_list);
                // we need to update the position as the Sprites are shared
                tile.position(48 * x, 48 * y);
                tile.canvasUpdate(layer);
            }
        }
    });

    function paint(ticker) {
        surface.move(-1 * ticker.lastTicksElapsed, -1 * ticker.lastTicksElapsed);
        surface.update();
        if(scene.ticker.currentTick % 30 == 0) {
            fps.innerHTML = ticker.fps;
            load.innerHTML = ticker.load;
        }

    }
    scene.Ticker(paint, {useAnimationFrame:true}).run()

});

</script>
